<template>
    <div class="bigBox">
        <div class="headerBox">
            <h5>办理入职手续</h5>
        </div>
        <div class="big2Box">
            <!-- <div class="content-box">
                <div>入职人姓名</div>
                <el-input v-model="input" style="width:900px;" readonly :value="name"></el-input>
            </div> -->
            <div class="content-box">
                <div>入职人姓名</div>
                <input type="text" readonly v-model="name" class="grayB">
            </div>


            <!-- <div class="content-box">
                <div>联系电话</div>
                <el-input v-model="input" placeholder="" style="width:900px;" readonly :value="phone"></el-input>
            </div> -->
            <div class="content-box">
                <div>联系电话</div>
                <input type="text" v-model="phone" readonly class="grayB">
            </div>

            <!-- <div class="content-box">
                <div>入职编号</div>
                
                <el-input v-model="input" placeholder="" style="width:900px;"></el-input>
            </div> -->
            <div class="myDateBox">
                <div style="color: gray;font-size: 14px;font-weight: 600;">入职日期</div>
                <div class="block">
                    <el-date-picker
                      v-model="myTime"
                      type="date"
                      style="width:900px;margin-left:33px;"
                      placeholder="选择日期"
                      value-format="yyyy-MM-dd">
                    </el-date-picker>
                </div>    
            </div>
            <div class="myDateBox">
                <div style="color: gray;font-size: 14px;font-weight: 600;">入职部门</div>
                <el-select v-model="myDe" placeholder="请选择员工所在部门" style="width:900px;margin-left:33px;">
                    <el-option
                     v-for="item in options"
                     :key="item.did"
                     :label="item.dname"
                     :value="item.dname">
                    </el-option>
                 </el-select>
            </div>
            <div class="myDateBox2">
                <div style="color: gray;font-size: 14px;font-weight: 600;">职称</div>
                <el-select v-model="myTitle" placeholder="请选择职称" style="width:900px;margin-left:33px;">
                    <el-option
                     v-for="item in options2"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                    </el-option>
                 </el-select>
            </div>
            <div class="myDateBox">
                <div style="color: gray;font-size: 14px;font-weight: 600;">应聘岗位</div>
                <el-select v-model="myJob" placeholder="请选择应聘的职位" style="width:900px;margin-left:33px;">
                    <el-option
                     v-for="item in options3"
                     :key="item.value"
                     :label="item.label"
                     :value="item.value">
                    </el-option>
                 </el-select>
            </div>
        </div>

        <div class="myBtn">
            <el-button type="primary" size="medium" @click="submitInfo">提交</el-button>
        </div>
    </div>
  
</template>

<script>
export default {
    name: "AcceptedInfoReply",
     data() {
        return {
            input: '',
            //时间
            myTime: '',
            //部门
            options: [],
            myDe: '',
            myTitle:'',
            myJob:'',
            //职称
            options2: [{
                  value: '总监',
                  label: '总监'
                }, {
                  value: '经理',
                  label: '经理'
                }, {
                  value: '主管',
                  label: '主管'
                }, {
                  value: '员工',
                  label: '员工'
                }],
            //岗位
            options3: [{
                  value: '销售',
                  label: '销售'
                }, {
                  value: '财务',
                  label: '财务'
                }, {
                  value: '人事',
                  label: '人事'
                }, {
                  value: '策划',
                  label: '策划'
                },{
                  value: '初级程序员',
                  label: '初级程序员'
                },
                {
                  value: '高级程序员',
                  label: '高级程序员'
                }],
        
      };
    },
    props:['id','phone','name'],
    mounted() {
      this.getInfo(),
      this.getDeInfo()
    },
    methods: {
      getInfo(){
        //console.log(this.id);
        //console.log(this.phone);
      },
      //部门名字
      getDeInfo(){
        this.$axios({
          method:"GET",
          url:"http://132.232.110.185/personnelManagement/departmentIdAndName/showDepartmentIdAndName",
        })
         .then(
                (res)=>{
                    //console.log(res);
                    //console.log(res.data.data);
                    this.options=res.data.data
                    
                },
                (err)=>{}
            )
      },
      //提交信息
      submitInfo(){
        this.$axios({
          method:"POST",
          url:`http://132.232.110.185/personnelManagement/talents/addEmployee?id=${this.id}`,
          data:{
              ename:this.name,
              ephone:this.phone,
              eJoinDate:this.myTime,
              dname:this.myDe,
              eposition:this.myTitle,
              ejobTitle:this.myJob
            }
        })
        .then(
                (res)=>{
                    //console.log(res);
                    //console.log(res.data.data);
                    //this.options=res.data.data
                    
                },
                (err)=>{}
            )
        alert("办理入职成功")
      }
    },
}
</script>

<style scoped>
    .bigBox{
        width: 98%;
        margin-left: 1%;
        background-color: white;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        height:650px;
    }
      /* 标题 */
    .headerBox{
      width: 100%;
      height: 40px;
      padding: 10px;
      display: flex;
      align-items: center;
      font-size: 18px;
      border-bottom:1px solid #cfd1d2;
    }
    /* 标题以下的内容 */
    .big2Box{
        padding-left:15px;
        padding-right:15px;
        padding-top:15px;
        padding-bottom: 20px;
        border-bottom: 1px dashed lightgray;
        border-top: 1px solid lightgray;
    }
    /* 每一横条 */
    .content-box{
    width: 100%;
    height: 40px;
    margin-top: 10px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .content-box div{
    text-align: end;
    width: 150px;
    height: 40px;
    line-height: 40px;
    color: gray;
    font-size: 14px;
    font-weight: 600;
  }
  input{
    color: gray;
    padding-left: 10px;
    width: 900px;
    height: 35px;
    border-style: 1px solid rgb(192,196,204);
    outline-color: rgba(131, 197, 245, 0.527);
  }
  /* 选择日期输入框 */
  .myDateBox{
    /* border:1px solid red; */
    display: flex;
    /* justify-content: space-around; */
    margin-top:10px;
    height:40px;
    line-height: 40px;
    width:90%;
    margin-left:112px;
  }
  /* 选择职位 */
  .myDateBox2{
    display: flex;
    margin-top:10px;
    height:40px;
    line-height: 40px;
    width:90%;
    margin-left:140px;
  }
   /* 提交按钮 */
  .myBtn{
    /* border:1px solid red; */
    width:10%;
    margin-left:218px;
    margin-top:20px;
  }
  .grayB{
    background-color: rgb(227, 225, 225);
    border:none;
    height:42px;
    border-radius:5px;
  }
</style>